<template>
  <div id="main">
    <!-- 新增 -->
    <el-button slot="left" v-permission="['admin', 'operationManual:add']" class="filter-item" size="mini"
      type="primary" icon="el-icon-upload" @click="crud.toAdd">上传
    </el-button>
    <!--表单组件-->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0" :title="crud.status.add ? '文件上传' : '编辑文件'" width="500px">
      <el-form ref="form" :model="form" size="small" label-width="80px">
        <!--   上传文件   -->
        <el-form-item v-if="crud.status.add" label="上传">
          <el-upload ref="upload" :limit="1" :before-upload="beforeUpload" :auto-upload="false" :headers="headers"
            :on-success="handleSuccess" :on-error="handleError" :action="baseApi + '/api/operationManual'">
            <div class="eladmin-upload"><i class="el-icon-upload" /> 添加文件</div>
            <div slot="tip" class="el-upload__tip">可上传任意格式文件，且不超过100M</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button v-if="crud.status.add" v-loading.fullscreen.lock="fullscreenLoading" type="primary"
          @click="upload">确认</el-button>
      </div>
    </el-dialog>
    <!-- 操作手册内容展示 -->
    <iframe v-if="'' != fileUrl" :src="fileUrl" width="100%" height="559px" ref="pdfFile"></iframe>
    <el-empty v-if="'' == fileUrl" description="未上传帮助文档" ref="emptyFile"></el-empty>
  </div>

</template>
<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import crudOperation from '@crud/CRUD.operation'
import crudFile from '@/api/tools/operationManual'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
const defaultForm = {}
export default {
  components: { crudOperation },
  cruds () {
    return CRUD({
      title: '文件', url: 'api/operationManual', crudMethod: { ...crudFile }, queryOnPresenterCreated: false
    })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data () {
    return {
      fullscreenLoading: false,
      fileUrl: '',
      content: '',
      headers: { 'Authorization': getToken() }
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  created () {
    //请求文件展示路径
    this.getFilePath()
  },
  methods: {
    //获取请求文件访问路径
    getFilePath () {
      this.crud.crudMethod.get().then((res) => {
        this.fileUrl = res
      })
    },
    // 上传文件
    upload () {
      this.$refs.upload.submit()
    },
    beforeUpload (file) {
      let isLt2M = true
      isLt2M = file.size / 1024 / 1024 < 100
      if (!isLt2M) {
        this.fullscreenLoading = false
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      this.form.name = file.name
      this.fullscreenLoading = true;
      return isLt2M
    },
    handleSuccess (response, file, fileList) {
      this.isShow = true;
      this.fullscreenLoading = false
      this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      this.$refs.upload.clearFiles()
      this.crud.status.add = CRUD.STATUS.NORMAL
      this.crud.resetForm()
      this.getFilePath()
    },
    // 监听上传失败
    handleError (e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
      this.fullscreenLoading = false
    }
  }
}
</script>

<style scoped>
::v-deep .el-image__error,
.el-image__placeholder {
  background: none;
}

::v-deep .el-image-viewer__wrapper {
  top: 55px;
}
</style>